<template>
  <!--主要是放html页面结构-->
  <section id="sales-promotion">
      <magic-header titleName="最新促销" :returnNative="$route.params.native"></magic-header>
      <empty v-if="promotions.length === 0" message='当前没有最新的促销信息'></empty>
      <section class="promotion-list" v-if="promotions.length !== 0">
        <section class="promotion-item" v-for="item in promotions" @click="toPromotionInfo(item)" :key="item.type">
          <section v-if="item.type === '0'" class="item-img" :style="'background-image:url('+(item.cover || freeShipping)+')'">
          </section>
          <section v-if="item.type === '3'" class="item-img" :style="'background-image:url('+(item.cover || fullCut)+')'">
          </section>
          <section v-if="item.type === '4'" class="item-img" :style="'background-image:url('+(item.cover || discount)+')'">
          </section>
          <section v-if="item.type === '5'" class="item-img" :style="'background-image:url('+(item.cover || fullGift)+')'">
          </section>
          <section v-if="item.type === '6'" class="item-img" :style="'background-image:url('+(item.cover || package)+')'">
          </section>
          <section class="item-text">
            <div>{{item.title}}</div>
            <p class="item-text-content">{{item.desc || '&nbsp;'}}</p>
            <p class="item-text-time">{{item.beginDate}} 至 {{item.endDate}}</p>
            <span>进行中</span>
          </section>
        </section>
      </section>
  </section>
</template>

<script>
  import magicHeader from 'components/magicHeader'
  import empty from 'components/empty-page'
  import {getSalesPromotion} from 'services/sales-promotion'
  import routerCouponIcon from 'assets/router-coupon-icon.png'
  import imagesServices from "services/getImage/getImage"

  export default{
    components: {
      magicHeader,
      empty
    },
    data() {
      return {
        imgUri: routerCouponIcon,
//        存放返回的促销列表
        promotions: [],
//        请求的type 值
/**
 *  [包邮0:FreeShipping,优惠券1:coupon,:商品2:product,满减3:FullCut,折扣4: Discount,满送5:FullGift,套餐6:Package]
 */
        type: ['FullCut','Discount','FreeShipping','FullGift','Package'],
        loaded: false,
        // 保存默认图片
        freeShipping:'',
        fullCut:'',
        fullGift:'',
        package:'',
        discount:'',
      }
    },
    created(){
      imagesServices.bind(this)({},res=>{
        this.freeShipping = res.data.freeShipping
        this.fullCut = res.data.fullCut
        this.fullGift = res.data.fullGift
        this.package = res.data.package
        this.discount = res.data.discount
      })
      this.getSalesList(this.type)
    },
    methods: {
      getSalesList(type){
        getSalesPromotion.bind(this)({
          promotionTypes: type
        }, (data) => {
          console.log(data)
          this.promotions = []
          data.promotions.forEach((data) => {
            data.cover = data.cover? this.addPath(data.cover):undefined
            this.promotions.push(data)
          })
          this.loaded = true
        }, (err) => {
          console.log(err)
          this.loaded = true
        })
      },
      //跳转到促销详情页面
      toPromotionInfo(item){
        console.log(item.id)
        this.$router.push({
          name: 'promotion-info',
          meta: {
            title: '促销详情',
            auth: true
          },
          params: {
            id: item.id,
            linkName: 'sales-promotion'
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  #sales-promotion {
    min-height: 100%;
    background-color: rgb(240, 240, 240);
    .promotion-list {
      padding-bottom: 5vh;
      width: 90%;
      margin: 0 auto;
      // display: flex;
      .promotion-item{
        width: 100%;
        margin-top: 5vh;
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
        .item-img{
          width: 100%;
          padding-top: 40%;
          background-size: cover;
        }
        .item-text{
          // -webkit-display: flex;
          // display: flex;
          padding: 2vh 2vh;
          min-height: 10vh;
          span{
            float: right;
            margin-top: -4vh;
            color: #ff8d00;
          }
        }
      }
      
    }
  }

</style>
